<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆叠顺序</title>
    <style>
        .box {
            position: absolute;
            width: 150px;
            height: 150px;
            font-size: 20px;
            color: white;
            text-align: center;

        }
        .box1 {
            background-color: pink;
            
            z-index: 1;
        }
        .box2 {
            background-color: blueviolet;
            left: 30px;
            top: 25px;
            z-index: 2;
        }
        .box3 {
            background-color: aquamarine;
            left: 60px;
            top: 50px;
            z-index: 10;
        }
    </style>
</head>
<body>
   <div class="box box1">1</div>
   <div class="box box2">2</div>
   <div class="box box3">3</div>

</body>
<!-- 
    堆叠顺序（z-index）
    在使用定位布局时，可能会出现盒子重叠的情况。此时，
    可以使用 z-index 来控制盒子的前后次序 (z轴)

    z-index 的特性如下：

    属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
    如果属性值相同，则按照书写顺序，后来居上；
    数字后面不能加单位。
    注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。
    应用 z-index 层叠等级属性可以调整盒子的堆叠顺序
 -->
</html>